<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2023/6/19
  Time: 9:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>客户列表</title>

     <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">

    <script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body style="height: 600px">
<table id="demo" lay-filter="test"></table>
<div class="layui-row" id="popUpdateTest" style="display:none;">
<div class="layui-container">
    <form class="layui-form" action="#" id="upfm">
        <div class="layui-form-item">
            <label class="layui-form-label">客户id</label>
            <div class="layui-input-block">
                <input type="text" name="clientId" id="clientId" lay-verify="required" placeholder="客户id" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公司名称</label>
            <div class="layui-input-block">
                <input type="text" id="clientName" name="clientName" lay-verify="required" placeholder="公司名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公司电话</label>
            <div class="layui-input-block">
                <input type="text" id="clientPhone" name="clientPhone" lay-verify="required" placeholder="公司电话" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">纳税识别号</label>
            <div class="layui-input-block">
                <input type="text" id="taxpayerNumber" name="taxpayerNumber" lay-verify="required" placeholder="纳税识别号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公司地址</label>
            <div class="layui-input-block">
                <input type="text" id="clientAddress" name="clientAddress" lay-verify="required" placeholder="公司地址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公司开户行</label>
            <div class="layui-input-block">
                <input type="text" id="clientBank" name="clientBank" lay-verify="required" placeholder="公司开户行" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公司银行号</label>
            <div class="layui-input-block">
                <input type="text" id="clientBankNumber" name="clientBankNumber" lay-verify="required" placeholder="公司银行号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系人名称</label>
            <div class="layui-input-block">
                <input type="text" id="contactName" name="contactName" lay-verify="required" placeholder="联系人名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系人电话</label>
            <div class="layui-input-block">
                <input type="text" id="contactPhone" name="contactPhone" lay-verify="required" placeholder="联系人电话" autocomplete="off" class="layui-input">
            </div>-
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户类型</label>
            <div class="layui-input-block">
                <select name="clientType" id="clientType" lay-verify="required">
                    <option value="">请选择客户类型</option>
                    <option value="1">类型1</option>
                    <option value="2">类型2</option>
                    <option value="3">类型3</option>
                </select>
            </div>
            <div class="layui-input-block">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">客户公司抬头</label>
            <div class="layui-input-block">
                <input type="text" id="clientTitle" name="clientTitle" lay-verify="required" placeholder="客户公司抬头" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注描述</label>
            <div class="layui-input-block">
                <textarea name="clientSrc" id="clientSrc" placeholder="请输入备注描述" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit onclick="updateClient()" lay-filter="submitForm">确认修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
</div>
</div>
</body>
<script type="text/javascript">

    layui.use(['jquery','layer','table','form'], function(){
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: '${pageContext.request.contextPath}/ClientS/getClientInfo' //数据接口
            ,page: true //开启分页
            ,limit:3
            ,limits:[3,6,9]


            ,cols: [[ //表头
                {field: 'clientId', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'clientName', title: '客户公司', width:80}
                ,{field: 'clientPhone', title: '客户电话', width:80, sort: true}
                ,{field: 'taxpayerNumber', title: '纳税人识别号', width:80}
                ,{field: 'clientAddress', title: '公司地址', width: 177}
                ,{field: 'clientBank', title: '公司开户行', width:80, sort: true, fixed: 'left'}
                ,{field: 'clientBankNumber', title: '公司银行卡号', width:80}
                ,{field: 'contactName', title: '联系人名称', width:80, sort: true}
                ,{field: 'contactPhone', title: '联系人电话', width:80}
                ,{field: 'clientType', title: '客户类型', width: 177,
                    templet:function(b){
                        if (b.clientType=="1"){
                            return "供应商";
                        }else if (b.clientType=="2"){
                            return "企业客户";
                        }else if (b.clientType=="3"){
                            return "批发商";
                        }
                    }
                }
                ,{field: 'clientTitle', title: '客户公司抬头', width:80}
                ,{field: 'clientSrc', title: '备注描述', width: 177}
                ,{field: '', title: '操作', width: 177,toolbar: "#barDemo"}
            ]]
        });
        //删除的的代码以及修改的弹窗
        table.on('tool(test)', function(obj){ // 双击 toolDouble
            var data = obj.data.clientId+0;
            // console.log(data)
            if(obj.event === 'deleteClient'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax( {
                        "url"            :  "${pageContext.request.contextPath}/ClientS/deleteClientById",
                        "type"         :  "get",
                        "data"         :  {"clientId":data},
                        "dataType" :  "json",
                        // contentType:"application/json;charset=utf-8",
                        "success"  :  function(result) {
                            layer.msg(result.message);
                            console.log(result.code);
                            if(result.code==20000){
                                table.reload("demo");
                            }
                        },
                        "error"       :  function() {
                            alert("出错了")
                        }
                    } );
                    layer.close(index);
                });
            } else if(obj.event === 'modifyStu'){
                $("#clientId").val(obj.data.clientId);
                $("#clientName").val(obj.data.clientName);
                $("#clientPhone").val(obj.data.clientPhone);
                $("#taxpayerNumber").val(obj.data.taxpayerNumber);
                $("#clientAddress").val(obj.data.clientAddress);
                $("#clientBank").val(obj.data.clientBank);
                $("#clientBankNumber").val(obj.data.clientBankNumber);
                $("#contactName").val(obj.data.contactName);
                $("#contactPhone").val(obj.data.contactPhone);
                $("#clientType").val(obj.data.clientType);
                $("#clientTitle").val(obj.data.clientTitle);
                $("#clientSrc").val(obj.data.clientSrc);
                layui.form.render('select', 'upfm'); // 重新渲染select元素
                    layer.open({
                        title: '编辑',
                        type: 1,
                        area: ['80%','90%'],
                        content:  $("#popUpdateTest"),
                });
            }
            if (obj.event === 'addclIENT'){
                layer.open({
                    title:'增加页面',
                    type:1,
                    area: ['80%','90%'],
                    content: $("#addMenuStu")
                });

                /**/
            }
        });


    })
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="customers"onclick=window.location.href="${pageContext.request.contextPath}client/customers">添加</button>

    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="deleteClient">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="modifyStu">修改</a>
</script>


<script type="text/javascript">
    //修改的代码
    function updateClient() {
        var data =fmobjToObj($("#upfm"));
        console.log("xiugai");
        $.ajax({
            url:'${pageContext.request.contextPath}/ClientS/updateClient',
            type:'POST',
            data:JSON.stringify(data),
            dataType:"text",
            contentType:"application/json;charset=UTF-8",
            "beforeSend": function() {     //请求之前的方法
                console.log("我要发送请求了");
            },
            "success"  :  function(result) {  // 请求成功后要执行的代码
                // alert(JSON.stringify(result))
                if (result=="success"){
                    alert("修改成功");
                    window.location.href="toclientlist";
                }else {
                    alert("修改失败");
                }
            },
            "error"       :  function() {     // 请求失败后要执行的代码
                alert("网络正忙，请稍等！！！")
            }
        } );
    }
    function  fmobjToObj(fmobj){
        var o = {};
        var a = fmobj.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    }
</script>
</body>
</html>
